<template>
  <view>
    <PublicPage pageName="推荐赚奖金" :borderType="true">
      <view class="recommend_layout_box">
        <view class="head_con_box">
          <view class="explain_box items-center justify-between">
            <view class="viceColorN8 linh-22 fw6">推荐奖金说明</view>
            <view class="btn_box" @click.stop="isExplainShow = true">详细规则</view>
          </view>
          <view class="explain_example">
            <view class="example_box">
              <image class="img_box" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/step_img1.png" alt="">
              <view class="text_box">帮供货邀请</view>
              <view class="text_box">新帮卖</view>
            </view>
            <view class="route_arrow_box"><image class="route_arrow_img" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/route_arrow.png" alt=""></view>
            <view class="example_box">
              <image class="img_box" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/step_img2.png" alt="">
              <view class="text_box">新帮卖带货</view>
              <view class="text_box">出单</view>
            </view>
            <view class="route_arrow_box"><image class="route_arrow_img" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/route_arrow.png" alt=""></view>
            <view class="example_box">
              <image class="img_box" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/step_img3.png" alt="">
              <view class="text_box">供货发放奖</view>
              <view class="text_box">金给你</view>
            </view>
          </view>
        </view>
        <view class="supply_list_tit">已开启推荐奖金供货列表</view>
        <view class="scrollList_box">
          <ScrollList
            ref="scrollView"
            @interrupt="interrupt"
            @scrolltolower="scrolltolower"
            v-if="!showDefaultPage"
          >
            <template slot="content">
              <view class="supply_user_box" v-for="(supply,supplyIndex) in supplyList" :key="supplyIndex" @click="choiceSupplyFn(supply)">
                <view class="choice_box">
                  <text class="iconfont icon-checkbox_fill fz-16 themeFontColor" v-if="supplyIdList.includes(supply.groupAccountId)"></text>
                  <text class="iconfont icon-checkbox fz-16 viceColorN8" v-else></text>
                </view>
                <view class="avatar_box u-m-r-16">
                  <image class="avatar_image" :src="supply.groupAvatar || 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/avatar2_icon.png'" mode="aspectFill" alt="">
                </view>
                <view class="user_msg_box">
                  <view class="user_name_box u-m-b-8 linh-20"><text class="user_name">{{supply.groupNickname}}</text><text class="scale_box">奖金 {{supply.recommendBonusRatio || 0}}%</text></view>
                  <view class="user_data_box viceColor fz-12 linh-16">
                    <text>
                      已发放佣金
                      <text class="themeFontColor u-m-l-10">¥{{playvolumeFn(supply.giveCommission || supply.recommendBonus) || 0}}</text>
                    </text>
                    <text class="u-m-l-24">
                      已为TA推荐
                      <text class="themeFontColor u-m-l-10">{{playvolumeFn(supply.recommendCount) || 0}}人</text>
                    </text>
                  </view>
                </view>
              </view>
            </template>
          </ScrollList>
          <DefaultPage v-else :minusHeight="0" :type="3" :custoBtn="true" tips="还没有供货开启推荐奖金，" tips2="快去邀请供货来开启吧！">
            <view class="u-flex">
              <button class="red_btn lack_invitation_btn" id="lackInvitation" open-type="share">
                邀请开启
              </button>
            </view>
          </DefaultPage>
        </view>
        <button @click.stop="onekeyFn" class="red_btn onekey_box" :class="{'di_onekey_box':onekeyDisabled}" :disabled="onekeyDisabled">一键推荐<text v-if="supplyIdList.length>0">({{supplyIdList.length}})</text></button>
      </view>
    </PublicPage>
    <!-- 分享预览 -->
    <PublishPopup v-if="dlGroup" :sharePublishData="shareObject" @closeSharePublishFn="closeSharePublishFn" />

    <u-popup v-model="isExplainShow" mode="center" border-radius="14" length="85%" mask-close-able>
      <view class="explain_msg_box">
        <view class="fz-16 fw6 viceColorN8 linh-24 tc">推荐奖金详细说明</view>
        <view class="u-m-t-16 u-m-b-24 themeFontColor linh-20">推荐奖金=新帮卖销售额 x 推荐奖金比例</view>
        <view class="viceColor linh-20">推荐奖金=新帮卖销售额 x 推荐奖金比例 例：你邀请“小红”成为供货A的新帮卖，小红帮供货A带货金额8000元，若供货A设置推荐奖金比例为5%，则供货A需要给你发放400元（8000*5%）推荐奖金。</view>
        <view class="viceColor u-m-t-24 linh-20">推荐奖金将发放至<text class="themeFontColor">奖金池内</text>，记得去奖金池提现哦。</view>
        <button class="red_btn" @click.stop="isExplainShow = false">我知道了</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import PublicPage from '@/components/publicPage/index.vue'
import ScrollList from '@/components/scrollList/index.vue'
import PublishPopup from '@/components/publishPopup/index.vue'
import DefaultPage from '@/components/defaultPage/index.vue'

import helpSellApi from '@/api/helpSellGroups.js'
import Util from "@/api/util.js"
export default {
  components: {
    PublicPage,
    ScrollList,
    PublishPopup,
    DefaultPage
  },
  data () {
    return {
      isExplainShow: false,
      onekeyDisabled: true,
      supplyList: [], // 供货列表
      showDefaultPage: false,
      postParams: {
        currentPage: 1,
        pageSize: 10,
      },
      listMore: true,
      supplyIdList: [], // 选择的供货ID
      dlGroup: false,
      shareObject: {
        type: 5,
        title: '',
        url: 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/InviteToHelpSell.png',
        path: ''
      }, // 分享参数
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    },
  },
  onLoad () {
    this.getSupplyListFn()
  },
  // 分享
  onShareAppMessage(res) {
    const shareData = {}
    console.log(res,'分享按钮触发地方')
    if (res.target.id == "lackInvitation") { // 没有供货邀请开启佣金
      shareData.title = '快来开启推荐奖金，我来帮你推荐帮卖，卖货出单更简单！'
      shareData.imageUrl = 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/InviteToHelpSell.png'
      shareData.path = `/pagesB/referralBonus/index?popup=true&idCode=${this.$store.state.userInfo.idCode}`
    }
    if (res.target.id == "othersRecommend") { // 推荐帮卖
      shareData.title = this.shareObject.title
      shareData.imageUrl = this.shareObject.url
      shareData.path = this.shareObject.path
    }
    console.log(JSON.parse(JSON.stringify(shareData)))
    return shareData
  },
  methods: {
    // 一键推荐=>保存供货id
    onekeyFn () {
      this.onekeyDisabled = true
      helpSellApi.oneKeyRecommend({groupAccountIdList: this.supplyIdList}).then(res => {
        if (res.code == 200) { // 请求成功处理分享数据
          this.shareObject = {
            ...this.shareObject,
            title: `我为你精选了${this.supplyIdList.length}位超给力的供货，快来一起帮卖赚钱吧！`,
            path: `pagesA/supplyGroups/selectSupplyList?recommendGroupLogId=${res.data.recommendGroupLogId}&recommendCode=${this.userInfo.idCode}`
          }
          // 清空数据显示分享弹窗
          this.supplyIdList = []
          this.onekeyDisabled = true
          this.dlGroup = true
        } else {
          this.onekeyDisabled = false //接口异常还可以点击
        }
      })
    },
    // 关闭弹窗清楚数据
    closeSharePublishFn () {
      this.dlGroup = false
    },
    playvolumeFn (mun) { // 处理数据过万的显示
      return Util.playvolume(mun)
    },
    // 选择供货
    choiceSupplyFn (item) {
      if (this.supplyIdList.length>=20) {
        uni.showToast({
          title: '最多可选20个！',
          icon: 'none'
        })
        return
      }
      this.supplyIdList = Util.selectArr(item.groupAccountId, this.supplyIdList)
      this.onekeyDisabled = this.supplyIdList.length>0?false:true
    },
    // 下拉刷新
    async interrupt () {
      this.listMore = true
      this.postParams = {
        ...this.postParams,
        currentPage: 1
      }
      await this.getSupplyListFn()
      setTimeout(() => {
        this.$refs.scrollView.refreshFinish() // 刷新完成
      }, 500);
    },
    // 滚动查询
    async scrolltolower () {
      if (!this.listMore) {
        this.$refs.scrollView.loadFinish(this.listMore ? 0 : 3) // 加载完成，是否还有更多
        return
      }
      this.listMore = true
      this.postParams = {
        ...this.postParams,
        currentPage: ++this.postParams.currentPage
      }
      await this.getSupplyListFn()
      this.$refs.scrollView.loadFinish(this.listMore ? 0 : 3) // 加载完成，是否还有更多
    },
    // 获取供货列表
    getSupplyListFn() {
      helpSellApi.getOpenRecommendBonusGroupList(this.postParams).then(res => {
        if (this.postParams.currentPage==1) {
          this.supplyList = res.data.records
        } else {
          this.supplyList = this.supplyList.concat(res.data.records)
        }
        if(res.data.records.length < this.postParams.pageSize){
          this.listMore = false
        }
        this.showDefaultPage = this.supplyList.length>0?false:true
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.recommend_layout_box {
  position: relative;
  width: 100%;
  height: 100%;
  .head_con_box {
    padding: 26rpx 32rpx;
    background: #fff;
    .explain_box {
      padding-bottom: 26rpx;
      .btn_box {
        font-size: 24rpx;
        line-height: 32rpx;
        padding: 8rpx 16rpx;
        border: 2rpx solid #DCDEE0;
        border-radius: 32rpx;
        color: #969799;
      }
    }
    .explain_example {
      display: flex;
      justify-content: space-between;
      margin: 40rpx 0 0 0;
      .example_box {
        width: 144rpx;
        .img_box {
          display: block;
          width: 96rpx;
          height: 96rpx;
          margin: 0 auto 16rpx;
        }
        .text_box {
          width: 100%;
          font-size: 28rpx;
          line-height: 40rpx;
          color: #323233;
          text-align: center;
        }
      }
      .route_arrow_box {
        padding-top: 32rpx;
        .route_arrow_img {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
  }
  .supply_list_tit {
    padding: 26rpx 32rpx;
    color: #323233;
    font-size: 32rpx;
    font-weight: bold;
    line-height: 44rpx;
    background: #fff;
    margin-top: 24rpx;
    box-shadow: inset 0rpx -2rpx 0rpx #EBEDF0;
  }
  .scrollList_box {
    width: 100%;
    height: calc(100% - 582rpx);
    .supply_user_box {
      background: #fff;
      display: flex;
      align-items: center;
      flex: 1;
      padding: 24rpx 32rpx;
      .choice_box {
        flex: 0 0 auto;
        margin-right: 20rpx;
      }
      .avatar_box {
        flex: 0 0 auto;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        overflow: hidden;
        .avatar_image {
          width: 100%;
          height: 100%;
          margin-right: 16rpx;
        }
      }
      .user_msg_box {
        .user_name_box {
          display: flex;
          align-items: center;
          flex: 1;
          width: 100%;
          .user_name {
            max-width: 400rpx;
            height: 40rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap !important;
          }
          .scale_box {
            flex:  0 0 auto;
            margin-left: 16rpx;
            font-size: 20rpx;
            color: #B57A43;
            padding: 0 8rpx;
            line-height: 32rpx;
            background: linear-gradient(90deg, #FDEDC7 0.12%, #FEDFA6 100%);
            border-radius: 4rpx;
          }
        }
      }
    }
  }
  .onekey_box {
    width: 100%;
    height: 100rpx;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0;
    color: #fff;
    &.di_onekey_box {
      background: #FFE5DE;
    }
  }
}
.explain_msg_box {
  padding: 48rpx;
  .red_btn {
    width: 100%;
    height: 80rpx;
    margin: 48rpx 0 0 0;
  }
}
.lack_invitation_btn {
  width: 176rpx;
  height: 64rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 64rpx auto 0;
}
</style>